/*
  1. 下载
    npm i vue-router@3

    因为vue-router4版本为vue3服务的，vue2不能使用
  2. 配置
    新建文件 src/router/index.js
      ```js
        import Vue from "vue";
        // vue-router是vue的插件，所以需要进行安装
        import VueRouter from "vue-router";

        // 引入路由组件
        import HomeComp from "../views/HomeComp";
        import AboutComp from "../views/AboutComp";

        // 安装插件
        // 内部会做两件事：
        Vue.use(VueRouter);

        // 进行路由配置
        const router = new VueRouter({
          // 配置对象
          routes: [
            {
              // 路由路径
              path: "/home",
              // 路由组件
              component: HomeComp,
            },
            {
              path: "/about",
              component: AboutComp,
            },
            {
              path: "*", // 匹配任意地址（除了前面地址以外）
              redirect: "/home", // 重定向
            },
          ],
        });

        export default router;
      ```
      - 在main.js应用router
      import router from './router'

      new Vue({
        router,
      })

  3. 使用
      <router-link> 用来路由跳转
      <router-view> 用来显示路由组件
*/
import Vue from "vue";
// vue-router是vue的插件，所以需要进行安装
import VueRouter from "vue-router";

// 引入路由组件
import HomeComp from "../views/HomeComp";
import NewsComp from "../views/HomeComp/components/NewsComp";
import MessageComp from "../views/HomeComp/components/MessageComp";
import DetailComp from "../views/HomeComp/components/MessageComp/components/DetailComp.vue";
import AboutComp from "../views/AboutComp";

// 安装插件
// 内部会做两件事：
Vue.use(VueRouter);

// 进行路由配置
const router = new VueRouter({
	// 配置对象
	routes: [
		{
			name: "HomeComp", // 命名路由
			// 路由路径
			path: "/home",
			// 路由组件
			component: HomeComp,
			// 子路由
			children: [
				{
					name: "NewsComp", // 命名路由
					path: "/home/news",
					component: NewsComp,
					meta: {
						// 路由路径完全匹配生效
						title: "新闻",
					},
				},
				{
					name: "MessageComp", // 命名路由
					// path: "/message", // 路由路径就是 /message
					path: "message", // 路由路径没有 / 开头，会自动补全父路由路径，/home/message
					component: MessageComp,
					children: [
						{
							name: "DetailComp", // 命名路由
							// 直接写路径 /xxx  一对一（一个路径对应渲染一个路由组件）
							// 直接写路径 /:xxx  多对一（多个路径对应渲染一个路由组件）
							path: "detail/:id", // :id就是路由的params参数
							component: DetailComp,
							props($route) {
								// 返回值对象，会以props方式传递到组件内
								return {
									...$route.query,
									...$route.params,
								};
							},
						},
					],
				},
				{
					path: "/home",
					redirect: "news",
				},
			],
		},
		{
			path: "/about",
			component: AboutComp,
			meta: {
				// 路由路径完全匹配生效
				title: "关于",
			},
		},
		{
			path: "*", // 匹配任意地址（除了前面地址以外）
			redirect: "/home", // 重定向
		},
	],
});

export default router;
